<template>
    <div >
        <page-container
        :header-ceiling="pageConfig.header.ceiling"
        :header-ceiling-color="pageConfig.header.ceilingColor"
        :header-regular="pageConfig.header.regular"
        :header-color="pageConfig.header.background"
        :footer-regular="pageConfig.footer.regular"
        :footer-color="pageConfig.footer.background"
        >
        <template v-slot:content>
            <div class="center-wrapper">
                <div class="center-container">
                    <div class="center-left">
                        <ul>
                            <li :class="{'active-item':active===item.route}" v-for="(item,index) in navList" :key="index" @click="optionHandler(item)">{{ item.name }}</li>
                            <li @click="link">问卷测验</li>

                        </ul>

                    </div>
                    <div class="center-right">
                        <router-view class="router-animation"></router-view>

                    </div>


                </div>
            </div>

        </template>

        </page-container>
       

    </div>
</template>

<script>
import PageContainer from '@/components/container/page-container/PageContainer.vue';
export default {
    data(){
        return{
            pageConfig:{
                header:{
                    regular:false,
                    ceiling:true,
                    background:'#1E171F',
                    ceilingColor:'#1E171F'
                },
                footer:{
                    regular:true,
                    background:'#1E171F'
                }
            },
            navList:[
                {name:'签到',route:'/center/sign-in'},
                {name:'个人资料',route:'/center/user-info'},
                {name:'博客管理',route:'/center/blog-manage'},
                // {name:'战队管理',route:'/center/dep-manage'},
                {name:'社交管理',route:'/center/social-manage'},
                {name:'资源工具',route:'/center/recources-manage'},
                {name:'能力测验',route:'/center/test-topic'},
            ],
            active:'/center/user-info'
            
        }
    },
    methods:{
        optionHandler(item){
            
            this.$router.push(item.route);
            this.active = item.route;

        },
      link() {
        window.open('https://survey.qugeek.com/#/login?redirect=/&sns_token=' + encodeURIComponent(window.localStorage.getItem("token")),'_blank')
      }

    },
    created(){

        this.$router.push(this.active);
      

    },
    watch:{
    //    active(newValue,oldValue){
    //         sessionStorage.setItem('currenActive',newValue);
            
    //    }
    },
    components:{
        PageContainer
    }

}
</script>

<style scoped>

.center-wrapper{
    width: 100%;
    height: 120vh;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.center-container{
    width: 1200px;
    height: 110vh;
    display: flex;
    justify-content: center;
    
}
.center-left{
    width: 20%;
    /* border: 1px solid #999; */
    display: flex;
    justify-content: center;
    /* background-color: #dcdfe6; */
    /* border-top: 1px solid #dcdfe6;
   border-left: 1px solid #dcdfe6;
   border-bottom: 1px solid #dcdfe6; */
   border: 1px solid #dcdfe6;
}
.center-right{
    width: 80%;
   border-top: 1px solid #dcdfe6;
   border-right: 1px solid #dcdfe6;
   border-bottom: 1px solid #dcdfe6;
  
   
}

ul{
    width: 100%;
    list-style:none;
    padding-left:0;
    padding-inline-start:0;
    margin-top: 0;
    
}
ul>li{
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    color: #999;
    
}
ul>li:hover{
    cursor: pointer;
    /* background-color: #FF9B00; */
}
.active-item{
    color: #fff;
    background-color: #ff9b00;
}

.router-animation{
    animation: fadeIn 1s;
}
</style>